<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta id="viewport" name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <meta name="format-detection" content="telephone=no" />
    <meta http-equiv="Cache-Control" content="no-transform" />
    <title>LayUI表单元素生成工具 - 爱思英语</title>
    <!--<link rel="stylesheet" href="http://static.24en.com/layui/css/layui.css">-->
    <link rel="stylesheet" href="../layui/css/layui.css"/>
    <link rel="stylesheet" href="../css/app.css"/>
    <!--<script src="./layui.js"></script>-->
    <!--<script src="http://static.24en.com/js/jquery.min.js"></script>-->
    <meta name="description" content="用于LAYUI表单组件生成,命令生成功能使得极速开发表单。常用组件如input,select,textarea,button等元素组件可视化选择生成,简单鼠标就可轻松生成." />
    <meta name="keywords" content="layui,layui表单,layui表单生成,layui表单生成工具,表单生成,生成工具" />

    <style>
        .btn_mode_hide{display:none;}.layui-btn.layui-this{background:#5FB878;border-color:#5FB878;color:#fff;}.layui-input-block p{line-height:36px;}.footer{margin-top:50px;clear:both;overflow:hidden;padding:20px 0;background-color:#2F4056;height:auto;position:relative;bottom:0;margin-bottom:0;width:100%;}.footer.logo{margin-top:20px;text-align:center;}.footer.text{margin-top:15px;text-align:center;font-size:14px;color:#486080;}.footer.text P{line-height:20px;}.footer.text p a{color:#486080;}.footer.text p a:hover{color:#01AAED;}.footer.logo.layui-icon{font-size:30px;color:#668dc1;}.line{width:100%;border-bottom:1px solid#d2d2d2;height:1px;margin:20px 0;}.main{}#tool-base{display:block;}#tool-code{display:none;}
    </style>
</head>
<body>
<div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
    <ul class="layui-tab-title">
        <li class="layui-this">基础信息</li>
        <li>数据接口信息</li>
    </ul>
    <div class="layui-tab-content" style="height: 100px;">
        <div class="layui-tab-item layui-show">
            <form id="myform" class="layui-form layui-form-pane" action="" style="margin: 5px">
                <div class="layui-form-item">
                    <label class="layui-form-label">编号</label>
                    <div class="layui-input-block" >
                        <input id="id" lay-filter="test1" type="text" name="id" required lay-verify="required" placeholder="请输入唯一标识名称（英文）" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">变量</label>
                    <div class="layui-input-block" >
                        <input id="var" lay-filter="test1" type="text" name="var" required lay-verify="required" placeholder="请输入唯一标识名称（英文）" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">名称</label>
                    <div class="layui-input-block" >
                        <input id="name" lay-filter="test1" type="text" name="name" required lay-verify="required" placeholder="请输入唯一标识名称（英文）" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">标识</label>
                    <div class="layui-input-block" >
                        <input id="elem" lay-filter="test1" type="text" name="elem" required lay-verify="required" placeholder="请输入唯一标识名称（英文）" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">ID</label>
                    <div class="layui-input-block" >
                        <input id="id_" lay-filter="test1" type="text" name="idTablein" required lay-verify="required" placeholder="请输入唯一标识名称（英文）" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">数据接口</label>
                        <div class="layui-input-block" >
                            <input id="url" lay-filter="test3" type="text" name="url" required lay-verify="required" placeholder="请输入唯一标识名称（英文）" autocomplete="off" class="layui-input">
                            <div class="layui-btn layui-btn-radius layui-btn-warm layui-btn-xs" id="connectTest" title="连接测试"><i class="layui-icon">&#xe64c;</i></div>
                        </div>
                    </div>
                    <div class="layui-inline">
                        <div class="layui-input-block" >
                        </div>
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">开启分页</label>
                    <div class="layui-input-block">
                        <input type="checkbox" checked="" name="page" lay-skin="switch" lay-filter="switchTest" lay-text="ON|OFF">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">开启loading</label>
                    <div class="layui-input-block">
                        <input type="checkbox" checked="" name="loading" lay-skin="switch" lay-filter="switchTest" lay-text="ON|OFF">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">每列最小宽度</label>
                    <div class="layui-input-block" >
                        <input id="cellMinWidth" lay-filter="test1" type="hidden" name="cellMinWidth" required lay-verify="required" placeholder="请输入唯一标识名称（英文）" autocomplete="off" class="layui-input">
                        <div id="slideTest8" class="demo-slider"></div>
                    </div>
                </div>


                <div class="layui-form-item">
                    <label class="layui-form-label">每页条数的选择项</label>
                    <div class="layui-input-block" >
                        <input id="limits" lay-filter="test1" type="text" name="limits" value="{10,15,30,50}" required lay-verify="required" placeholder="请输入唯一标识名称（英文）" autocomplete="off" class="layui-input">
                    </div>
                </div>


                <div class="layui-form-item">
                    <label class="layui-form-label">默认每页条数</label>
                    <div class="layui-input-block" >
                        <input id="limit" lay-filter="test1" type="hidden" name="limit" required lay-verify="required" placeholder="请输入唯一标识名称（英文）" autocomplete="off" class="layui-input">
                        <div id="slideTest2" class="demo-slider layui-input"></div>
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">开启表格头部工具栏区域</label>
                    <div class="layui-input-block">
                        <input type="checkbox" checked="" name="toolbar" lay-skin="switch" lay-filter="switchTest" lay-text="ON|OFF">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">头部右侧工具栏</label>
                    <div class="layui-input-block">
                        <input type="checkbox" name="defaultToolbar[exports]" title="导出" checked="">
                        <input type="checkbox" name="defaultToolbar[filter]" title="筛选" checked="">
                        <input type="checkbox" name="defaultToolbar[print]" title="打印" checked="">
                    </div>
                </div>



                <div class="layui-form-item">
                    <label class="layui-form-label">说明</label>
                    <div class="layui-input-block" >
                        <input id="remarks" lay-filter="test1" type="text" name="remarks" required lay-verify="required" placeholder="请输入唯一标识名称（英文）" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <!--htmlId;-->
                <div class="layui-form-item layui-form-text">
                    <label class="layui-form-label">代码</label>
                    <div class="layui-input-block" >
                        <textarea placeholder="请输入内容" class="layui-textarea" name="code"></textarea>
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">描述</label>
                    <div class="layui-input-block" >
                        <input id="description" lay-filter="test1" type="text" name="description" required lay-verify="required" placeholder="请输入唯一标识名称（英文）" autocomplete="off" class="layui-input">
                    </div>
                </div>

                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button class="layui-btn" lay-submit lay-filter="connect_test">连接测试</button>
                        <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
                        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                    </div>
                </div>
            </form>
        </div>
        <div class="layui-tab-item">内容2</div>
    </div>
</div>





</body>
<script type="text/javascript" src="../layui/layui.js"></script>
<script>
    layui.config({base: '../js/'}).use(['jquery','baajax','form','slider','element'], function(){
        var form = layui.form;
        var slider = layui.slider;
        var ajax=layui.baajax;
        var $=layui.jquery;
        var element = layui.element; //Tab的切换功能，切换事件监听等，需要依赖element模块


        alert('dangqian 隐藏ID1:'+parent.layui.$('#html_id_table_id').val());


        getInfo();
        //监听提交
        form.on('submit(formDemo)', function(data){
            layer.msg(JSON.stringify(data.field));
            $.ajax({
                type: "POST",
                url: "/metadatadatabase",
                dataType: "json",
                data: data.field,
                cache: true,
                async: false,
                success: function (data) {
                    if(data.code=='200'){
                        //layer.msg('添加成功');
                        layer.confirm('添加成功,是否继续添加?', {icon: 3, title:'提示'}, function(index){
                            //form.render(null, 'test1');
                            // $("#myform").get(0).reset();
                            layer.close(index);
                        },function(index){
                            //table.refresh();
                            layer.closeAll();
                        });
                    }
                    // var ret = data;
                    // succFunc(ret, paras);
                },
                error: function () {
                    layer.msg('失败');
                    // errorFunc();
                }
            })
            return false;
        });

        //开启输入框
        slider.render({
            elem: '#slideTest8'
            ,value: 80 //初始值
            ,input: true //输入框
        });
        //定义初始值
        slider.render({
            elem: '#slideTest2'
            ,value: 15 //初始值
            ,input: true //输入框
        });

        // //监听连接测试提交
        // form.on('submit(connect_test)', function(data){
        //     layer.msg(JSON.stringify(data.field));
        //     $.ajax({
        //         type: "POST",
        //         url: "/metadatadatabase/connectTest",
        //         dataType: "json",
        //         data: data.field,
        //         cache: true,
        //         async: false,
        //         success: function (data) {
        //             if(data.code=='200'){
        //                 layer.msg('连接成功');
        //             }else{
        //                 layer.msg('连接失败');
        //             }
        //             // var ret = data;
        //             // succFunc(ret, paras);
        //         },
        //         error: function () {
        //             layer.msg('请求失败');
        //             // errorFunc();
        //         }
        //     })
        //     return false;
        // });
        $('#connectTest').on('click',function(){
            var testflag=true;
            var url=$('#url').val();
            if(url==''){
                layer.msg("数据接口不能为空");
                return;
            }
            ajax.post("/urljson/connectTest", {
                url: url,
                requestMethod:'GET'
            }, function (data) {
                if (data.code !== 200) {
                    layer.msg('请求响应失败');
                    testflag=false;
                    return;
                }else{
                    layer.msg('请求响应成功');
                    layer.alert(data.message);
                }
            });

            // layer.msg("测试成功");
            //解析json结构

            ajax.post("/urljson/structuralStorage", {
                url: url,
                requestMethod:'GET'
            }, function (data) {
                if (data.code !== 200) {
                    layer.msg('json结构解析失败');
                    testflag=false;
                    return;
                }else{
                    layer.msg('json结构解析成功');
                }
            });

if(testflag){
    layer.confirm('是否立即设置数据源信息?', {icon: 3, title:'提示'}, function(index){
        //form.render(null, 'test1');
        layer.close(index);
        var index1 = layer.open({
            type: 2
            , area: ['900px', '400px']
            , title: '数据源绑定'
            , offset: 'auto' //具体配置参考：http://www.layui.com/doc/modules/layer.html#offset
            , id: 'addMenuLayer' + 1 //防止重复弹出
            , content: '/static/vipadmin/page/table-data-checkbox-many.html'
            , maxmin: true
            , end: function () {
                // table_metadata_table.reload();
            }//,shade: 0 //不显示遮罩
        });
        // $("#myform").get(0).reset();
        // layer.close(index);
    },function(index){
        //do something
        //alert(index);
        //table.refresh();
        layer.closeAll();
    });
}






            // $.ajax({
            //     type: "GET",
            //     url: url,
            //     dataType: "json",
            //     data: paras,
            //     cache: true,
            //     async: false,
            //     success: function (data, paras) {
            //         var ret = data;
            //         layer.msg("测试成功");
            //     },
            //     error: function () {
            //         layer.msg("测试失败");
            //     }
            // })
        });
        function getInfo(){
            ajax.get("/metadatadatabase/"+$("#layer_metadata_databaseId").val(),{},function (data) {
                //if(data.code=='200'){
                //layer.msg('添加成功');
                $("#id").val(data.id);
                $("#ip").val(data.ip);
                $("#url").val(data.url);
                $("#host").val(data.host);
                $("#port").val(data.port);
                $("#username").val(data.username);
                $("#password").val(data.password);
                $("#description").val(data.description);
                $("#companyName").val(data.companyName);
                $("#companyId").val(data.companyId);
                $("#author").val(data.author);
                // $("#answer").val(data.answer);
                // $("#operator").val(data.operator);
                if(data.userflag===0){
                    $("#switch").prop('checked','checked');
                }else{
                    $("#switch").removeAttr('checked');
                }
                form.render('checkbox');
                //}
            },function () {
                layer.msg('查询失败');
            });
        }
    });
</script>
</html>